<!-- 
    -------------------------------------------------------------------------------------------------
    三.修改内容
            3.样式
                    获取：
                        // 只能获取行内样式，获取不到行外样式
                        // console.log(this.style.属性名);      //  法1

                        // console.log(this.属性名);    // 法2


                        // 可以获取行外样式
                        getComputedStyle((目标).属性名)     //  被计算后的最终样式

                    修改：

                        this.style = "属性:值"      //  会覆盖其他样式

                        this.style.样式属性名 = 样式属性值      //  不会覆盖其他样式




 -->



 



<!-- 拖拽案例思路
    1.html创建块div
    2.头部style中使用css控制块div
    3.dom
        获取目标    div
        绑定事件    1.鼠标按下————》鼠标按下移动—————》鼠标抬起————》鼠标抬起移除移动

                   2.在鼠标移动事件中  传入参数e  用来获取鼠标坐标（e.pageX, e.pageY）

                   3.给div定位  absolute（绝对定位不占字节流，可任意位置移动）

                   4.修改div位置===鼠标位置       
                                            div.style.left = e.pageX - 50 + "px"
                                            div.style.top = e.pageY - 50 + "px"
                                            -50为了让图片中心偏移到鼠标处


                        偏移公式：  （top，left是被拖拽目标离页面的距离）
                                    （offsetX，offsetY是偏移量）（鼠标相对于被拖拽目标左上角顶点的偏移量）

                            按下瞬间确定偏移量：
                                offsetX = mouseX - left
                                offsetY = mouseY - top

                            移动过程中保持偏移量：
                                left = mouseX - offsetX
                                top = mouseY - offsetY                      
-->












<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>




    <style>
        /* 样式 */
        .样式 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>




    <style>
        /* 换色案例 */
        .换色 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>






    <!-- 2.CSS控制块样式 -->
    <style>
        /* 拖拽案例 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .拖拽 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;

        }
    </style>



</head>

<body>



    
    <!----------------------------------------------------------------->
    <!-- <div class="样式" style="border: 1px solid black"></div> -->

    <script>// // -------------样式-----------------------
        // let div = document.querySelector(".样式")     //  获取元素
        // div.addEventListener("click", function () {

        // // 通过修改属性的方式，修改样式
        // this.style = "background-color:blue"     //  行内样式 写法1  会覆盖行内其他样式
        // this.style.backgroundColor = "red"    //  行内样式 写法2   不会覆盖行内其他样式


        // // 只能获取行内样式，获取不到行外样式
        // console.log(this.style.border);
        // console.log(this.backgroundColor);


        // // 行外样式
        // console.log(getComputedStyle(div).backgroundColor);

        // })
    </script>






    <!----------------------------------------------------------------->
    <!-- <div class="换色" style="border: 1px solid black"></div> -->

    <script>// // -------------颜色切换案例-----------------------
        // // 计数法
        // let colors = ["red", "yellow", "blue", "green"]
        // let color_index = 0
        // let div = document.querySelector(".换色")   //  获取目标

        // div.style.backgroundColor = colors[color_index]
        // div.addEventListener("click", function () {   //  绑定事件
        //     color_index++
        //     if (color_index > colors.length) {
        //         color_index = 0
        //     }
        //     this.style.backgroundColor = colors[color_index]
        // })





        // // 取余法
        // let colors = ["red", "yellow", "blue", "green"]
        // let color_index = 0
        // let div = document.querySelector(".样式")   //  获取目标

        // div.style.backgroundColor = colors[color_index]
        // div.addEventListener("click", function () {   //  绑定事件
        //     color_index++
        //     // if (color_index > colors.length) {
        //     //     color_index = 0
        //     // }
        //     this.style.backgroundColor = colors[color_index % colors.length]
        // })

    </script>







    <!----------------------------------------------------------------->

    <!-- 1.创建块 -->
    <div class="拖拽"></div>







    <script>// // 版本1（图片中心跳转到鼠标处）

        // // 获取目标
        // let div = document.querySelector(".拖拽")


        // // 绑定事件

        // let mousemove_event = function (e) {
        //     console.log("鼠标移动事件");
        //     console.log(e.pageX, e.pageY);
        //     div.style.left = e.pageX - 50 + "px"
        //     div.style.top = e.pageY - 50 + "px"

        // }


        // div.addEventListener("mousedown", function () {
        //     console.log("鼠标按下事件");
        //     div.addEventListener("mousemove", mousemove_event)
        //     // offsetX = e.pageX - getComputedStyle(div).left
        // })


        // div.addEventListener("mouseup", function () {
        //     console.log("鼠标抬起事件");
        //     div.removeEventListener("mousemove", mousemove_event)
        // })
    </script>





    <script>// // 版本2（图片与鼠标保持偏移量）
        // // 获取目标
        // let div = document.querySelector(".拖拽")


        // // 绑定事件

        // let mousemove_event = function (e) {        //  鼠标移动事件
        //     console.log("鼠标移动事件");
        //     console.log(e.pageX, e.pageY);
        //     div.style.left = e.pageX - offsetX + "px"
        //     div.style.top = e.pageY - offsetY + "px"
        // }


        // div.addEventListener("mousedown", function (e) {        //  鼠标按下事件
        //     div.addEventListener("mousemove", mousemove_event)
        //     // 去单位px
        //     let left_str = getComputedStyle(div).left
        //     let left = parseInt(left_str.slice(0, left_str.length - 2))
        //     let top_str = getComputedStyle(div).left
        //     let top = parseInt(top_str.slice(0, top_str.length - 2))
        //     offsetX = e.pageX - left
        //     offsetY = e.pageY - top

        // })


        // div.addEventListener("mouseup", function () {       //  鼠标抬起事件
        //     div.removeEventListener("mousemove", mousemove_event)
        // })

    </script>





    <script>// // 最终版
        // // 获取目标
        // let div = document.querySelector(".拖拽")

        // // 绑定事件
        // let mousemove_event = function (e) {        //  鼠标移动事件
        //     console.log("鼠标移动事件");
        //     console.log(e.pageX, e.pageY);
        //     div.style.left = e.pageX - offsetX + "px"
        //     div.style.top = e.pageY - offsetY + "px"
        // }


        // div.addEventListener("mousedown", function (e) {        //  鼠标按下事件
        //     div.addEventListener("mousemove", mousemove_event)

        //     let left = div.offsetLeft
        //     let top = div.offsetTop

        //     offsetX = e.pageX - left
        //     offsetY = e.pageY - top

        // })


        // div.addEventListener("mouseup", function () {       //  鼠标抬起事件
        //     div.removeEventListener("mousemove", mousemove_event)
        // })
    </script>





</body>

</html>